const path = require('path');
const { DefinePlugin } = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
	entry: './src/index.ts',
	module: {
		rules: [
			{
				// 用来匹配 .css 结尾的文件
				test: /\.css$/,
				// use 数组里面 Loader 执行顺序是从右到左
				use: ["style-loader", "css-loader"],
			},
			{
				test: /\.s[ac]ss$/,
				use: ["style-loader", "css-loader", "sass-loader"],
			},
			
			{
				test: /\.vue$/,
				use: ["vue-loader"], // 内部会给vue文件注入HMR功能代码
			},
			{
				test: /\.ts$/,
				use: ['ts-loader'],
				exclude: /node_modules/,
			},
		],
	},
	resolve: {
		extensions: ['.tsx', '.ts', '.js', 'vue'],
		alias:{
			"@":path.resolve(__dirname, '../src')
		}
	},
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist'),
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: path.resolve(__dirname, "../public/index.html"),
		}),
		new VueLoaderPlugin(),
		// 解决页面警告
		new DefinePlugin({
			__VUE_OPTIONS_API__: "true",
			__VUE_PROD_DEVTOOLS__: "false",
		}),
	],
	devServer: {
		open: true,
		host: "localhost",
		port: 3000,
		hot: true,
		compress: true,
	},
	mode: "development",
	devtool: "cheap-module-source-map",
};